import React from 'react';
import {connect} from 'react-redux';
import {hashHistory} from 'react-router';
import {getCarts,addToCart,reduceNum,delPdt} from './../action/product';

var _ = require('lodash');

class CartsContext extends React.Component{
    componentWillMount(){
        const {fakeAuth} = this.props;
        if (!fakeAuth.isAuthenticated) {
            hashHistory.push('/unlogin')
            return false;
        }
        
    }
    add(e){
        e.stopPropagation();
        let idx=parseInt(e.currentTarget.getAttribute('data-idx'));
        let addToCartProduct=_.uniqWith(this.props.carts,_.isEqual)[idx];
        this.props.addToCart(addToCartProduct);
    }
    reduce(e){
        e.stopPropagation();
        let idx=parseInt(e.currentTarget.getAttribute('data-idx'));
        let addToCartProduct=_.uniqWith(this.props.carts,_.isEqual)[idx];
        this.props.reduceNum(addToCartProduct);
    }
    delete(e){
        e.stopPropagation();
        let idx=parseInt(e.currentTarget.getAttribute('data-idx'));
        let addToCartProduct=_.uniqWith(this.props.carts,_.isEqual)[idx];
        this.props.delPdt(addToCartProduct);
    }
    render(){
        const {carts} = this.props;
        var cls = _.uniqWith(carts,_.isEqual);
        let total=0;
        var output = [];
        for(let i=0;i<cls.length;i++){
            total+=cls[i].unitprice*cls[i].quantity;
            output.push(
                 <tr key={i}>
                    <td style={{width:'21%'}}><img src={cls[i].picurl} className="image"/></td>
                    <td style={{width:'21.5%'}}>
                        <div>
                            <strong>{cls[i].productname}</strong>
                        </div>
                    </td>
                    <td style={{width:'17%'}}>
                        <button type="button" className="btn btn-primary" style={{width:'35px'}} data-idx={i} onClick={(e)=>this.add(e)}>+</button>
                        <strong style={{display:'inline-block',width:'35px',textAlign:'center'}}>{cls[i].quantity}</strong>
                        <button type="button" className="btn btn-danger" style={{width:'35px'}} data-idx={i} onClick={(e)=>this.reduce(e)}>-</button>
                    </td>
                    <td  style={{width:'14%'}}>&yen;{cls[i].unitprice}</td>
                    <td  style={{width:'15%'}}>&yen;{cls[i].quantity*cls[i].unitprice}</td>
                    <td>
                        <button type="button" 
                            className="btn btn-sm btn-danger" 
                            data-idx={i} 
                            onClick={(e)=>this.delete(e)}>删除</button>
                    </td>
                </tr>
            )
        }
        return (
            <div>
                <table className="table invoice-table">
                    <thead>
                        <tr>
                            <th>产品图例</th>
                            <th>产品名称</th>
                            <th>数量</th>
                            <th>单价</th>
                            <th>合计</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                </table>
                <div className="table-responsive m-t"  style={{overflow:'scroll',overflowX:'hidden',height:'500px'}}>
                    <table className="table invoice-table">
                        <tbody>
                            {output}
                        </tbody>
                    </table>
                </div>

                <table className="table invoice-total">
                    <tbody>
                        <tr>
                            <td style={{width:'80%'}}></td>
                            <td><strong>总计</strong>
                            </td>
                            <td>&yen;{total}</td>
                        </tr>
                    </tbody>
                </table>
                <div className="text-right">
                    <button className="btn btn-primary"><i className="fa fa-dollar"></i> 去付款</button>
                </div>

                <div className="well m-t"><strong>注意：</strong> 请在30日内完成付款，否则订单会自动取消。
                </div>
            </div>
        )
    }
}

const getValue = (state)=>{
    return {
        carts:state.product.carts,
        total:state.product.total,
        fakeAuth:state.auth.fakeAuth
    }
}

const Carts = connect(getValue,{getCarts,addToCart,reduceNum,delPdt})(CartsContext);

module.exports=Carts;